<div id="ecard_frame" style="position:relative;">
    <video id="webcamvideo" width="960" height="640" autoplay style="position:absolute;"></video>
	<canvas id="c" width="960" height="640" style="position:absolute;display:none;">
		Sorry, your web browser does not support Canvas content.
	</canvas>
</div>
<div class="center">
	<form action="<?php echo site_url('castit')?>" method="post" id="webcam_form">
		<textarea id="photo_data" name="photo_data" style="display:none;"></textarea>
	</form>
	<a href="#" id="btn_takephoto" class="link_btn">Take Photo</a>
	<a href="<?php echo site_url("personalize");?>" id="btn_back" class="link_btn" style="margin-left:200px;">Back</a>
</div>
<script>
var base_url = "<?php echo base_url();?>";
var canvas_width = 960;
var canvas_height = 640;

var canvas = new fabric.Canvas('c');

$(document).ready(function(){
	var video = document.getElementById('webcamvideo');
	navigator.getUserMedia = (navigator.getUserMedia ||
								navigator.webkitGetUserMedia ||
								navigator.mozGetUserMedia ||
								navigator.msGetUserMedia);
	if (navigator.getUserMedia) {
		navigator.getUserMedia(
			{ video: true },
			function (localMediaStream) {
				video.src = window.URL.createObjectURL(localMediaStream);
			}, onFailure);
	}
	else {
		alert('OOPS No browser Support');
	}
	
	$("#btn_takephoto").click(function(){
		canvas.getContext().drawImage(video,0,0);
		var image_data = $("#c").get(0).toDataURL();
		$("#photo_data").val(image_data);
		$("#webcam_form").submit();
	});

	function onFailure(err) {
		console.log(err);
		alert("The following error occured: " + err.name);
		window.history.back();
	}
});
</script>
